<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小微产品清单</title>
</head>
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>

<!-- dev mock js -->
<script src="../../node_modules/mockjs/dist/mock-min.js"></script>
<script src="../static/js/mock_config.js"></script>

<!-- 自定义css -->
<link rel="stylesheet" href="../static/css/electronicFont.css?version=1.0">
<style>
    * {
        color: #ffffff;
    }
    
    body,
    html {
        background-color: #162634;
    }
    
    .el-table .warning-row {
        background-color: #a2af68 !important;
    }
    
    .el-table .success-row {
        background-color: #85b16d !important;
    }
    
    .dtlist {
        width: 100%;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    thead {
        font-size: 12px;
        background-color: #2f415c;
    }
    
    tbody {
        background-color: #162634;
    }
    
    th,
    tr {
        background-color: transparent !important;
    }
    
    .el-table {
        font-size: 18px;
        background-color: transparent;
    }
    
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #a9a9aa !important;
    }
</style>


<body>
    <div id="app">

        <div class="wrapper">
            <div class="dtlist">
                <!-- :row-class-name="tableRowClassName" -->
                <el-table :data="Datalist" :default-sort="{prop: 'MkName', order: 'descending'}" border height="950" style="width: 100%;" ref="MakerGoods">
                    <el-table-column prop="MkName" sortable align="center" label="小微名称">
                    </el-table-column>
                    <el-table-column prop="GoodsName" sortable align="center" label="产品编号">
                    </el-table-column>
                    <el-table-column prop="ProdTime" sortable align="center" label="生产周期(S)">
                    </el-table-column>
                    <el-table-column prop="ProPrice" sortable align="center" label="承包单价">
                    </el-table-column>
                    <el-table-column prop="QtyDayPrt" sortable align="center" label="最大生产数/天">
                    </el-table-column>
                    <el-table-column prop="DayAmtVal" sortable align="center" label="最大生产价值/天">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                Datalist: []
            }
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (row.MkName.includes("黄初招注塑团队") ||
                    row.MkName.includes("刘韩组装团队") ||
                    row.MkName.includes("覃春海注塑团队") ||
                    row.MkName.includes("维仕豪小薇")
                ) {
                    return 'success-row';
                }
                return '';
            }
        },
        mounted() {
            var that = this
            setTimeout(function() {
                GetCodeData('VB21070311444624', "get", "MakerGoods").then(function(res) {
                    that.Datalist = res.rows
                    console.dir(that.Datalist);
                })
            }, 0);
            TableAotoRoll([this.$refs.MakerGoods])
            setInterval(function() {
                GetCodeData('VB21070311444624', "get", "MakerGoods").then(function(res) {
                    that.Datalist = res.rows
                })
            }, 1000 * 60 * 60 * 3); // 三小时自动刷新一次
        }
    })
</script>

</html>